<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snakes</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>

<body>
    <div id="canvass">
        <div style="font-size: 32px;font-family: 华文彩云;">贪吃蛇(改)
        </div>
        <div id="sc">
            分数:0
        </div>
        <ul>
            <li style="background-color:red">&nbsp;&nbsp;&nbsp;</li>分数+1
            <li style="background-color:yellow">&nbsp;&nbsp;&nbsp;</li>分数+2
            <li style="background-color:rgb(2,200,255)">&nbsp;&nbsp;&nbsp;</li>分数-1
            <li style="background-color:purple">&nbsp;&nbsp;&nbsp;</li>长度-1
            <li style="background-color:blue">&nbsp;&nbsp;&nbsp;</li>速度-1
            <li style="background-color:rgb(0,255,127)">&nbsp;&nbsp;&nbsp;</li>速度+1
            <li style="background-color:rgb(139,69,19)">&nbsp;&nbsp;&nbsp;</li>方向反转
            <li style="background-color:rgb(255,4,138)">&nbsp;&nbsp;&nbsp;</li>长度+2
        </ul>
        <div id="rules">
            <canvas id="game" width="600" height="600"></canvas>
            <div>
            <div style="display: flex;flex-direction: column;">
                <button class="rules_button" onclick="ShowDiv('MyDiv','fade')">规则</button>
                <button id = "mode"class="rules_button" style="background-color: rgb(2, 118, 141);" onclick="changeMode()">闯关模式</button>
                <button id ="stopgame" class="rules_button" style="background-color: rgb(7, 136, 162);" onclick="stopGame()">暂停</button>
                <button class="rules_button" style="background-color: rgb(7, 164, 196);" onclick="rePlayGame()">重新开始</button>
            </div>

                <!--弹出层时背景层DIV-->
                <div id="fade" class="black_overlay">
                </div>
                <div id="MyDiv" class="white_content">
                    <div style="text-align: right; cursor: default; height: 20px;padding-right: 10px;">
                        <span style="font-size: 16px; font-family: 华文彩云;color: black;"
                            onclick="CloseDiv('MyDiv','fade')">X</span>
                    </div>
                    <div style="padding-left: 30px;">
                        <ul>
                            <li style="background-color:red">&nbsp;&nbsp;&nbsp;</li>分数+1
                            <li style="background-color:yellow">&nbsp;&nbsp;&nbsp;</li>分数+2
                            <li style="background-color:rgb(2,200,255)">&nbsp;&nbsp;&nbsp;</li>分数-1
                            <li style="background-color:purple">&nbsp;&nbsp;&nbsp;</li>长度-1
                            <li style="background-color:blue">&nbsp;&nbsp;&nbsp;</li>速度-1
                            <li style="background-color:rgb(0,255,127)">&nbsp;&nbsp;&nbsp;</li>速度+1
                            <li style="background-color:rgb(139,69,19)">&nbsp;&nbsp;&nbsp;</li>方向反转
                            <li style="background-color:rgb(255,4,138)">&nbsp;&nbsp;&nbsp;</li>长度+2
                        </ul>
                        <b>注：游戏刚开始请先点击重新开始按钮开启游戏，模式切换必需先暂停，再切换,在重新开始。(
                        重新开始按钮必需在游戏暂停或死亡时才生效)</b><br>
                        无尽模式&闯关模式:<br>
                        ↑↓←→ 或 wasd 来控制蛇的方向控制<br>
                        吃到每个苹果获得不同效果(具体如上)<br>
                        默认只要吃到苹果分数+1,长度+1<br>
                        速度每10的倍数速度+3<br>
                        撞到墙或自身失败<br>
                        速度最小为7,分数最小为0,长度最小为0<br><br>

                        以下为闯关模式玩法：<br>
                        第一关:<br>
                        当速度达到16时,会产生"1"果实<br>
                        当分数达到17时,会产生"0"果实<br>
                        当长度达到18时,会产生"2"果实<br>
                        当分数达到26、速度达到22、长度达到24时,会产生"4"果实<br>
                        第二关:<br>
                        当速度达到16时,会产生"1"果实<br>
                        当分数达到17时,会产生"0"果实<br>
                        当长度达到18时,会产生"2"果实<br>
                        当分数达到28、速度小于13、长度小于10时,会产生"4"果实<br><br>
                        集齐"1""0""2""4"即可通关<br>
                        <B>注:记得开启声音！！！第二关胜利了有惊喜！！！</B><br><br>
                        <B>Copyright &copy; 2022 carden </B><br>
                        <B>https://gitee.com/c-a-r-d-e-n/snake && https://github.com/Ederson-Carden/snakes</B>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <script src="../js/index.js"></script>
</body>

</html>